<template>
    <div ref="triangleRef" class="triangle" :class="{ up: isUp, down: !isUp }" @click="toggleTriangle">
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 响应式状态来跟踪三角形的方向  
const isUp = ref(true);
const router = useRouter()
// 模板引用，用于在组件挂载后访问DOM元素  
const triangleRef = ref(null);

// 切换三角形方向和颜色的函数  
function toggleTriangle() {
    isUp.value = !isUp.value;
    updateTriangleStyle();
}

// 更新三角形样式的函数  
function updateTriangleStyle() {
    if (triangleRef.value) {
        const triangle = triangleRef.value;
        // 总是将三角形设置为灰色  
        // triangle.style.borderColor = 'gray';
        if (isUp.value) {
            // 向上时，设置底部颜色为蓝色  
            triangle.style.borderBottomColor = 'blue';
        } else {
            // 向下时，设置顶部颜色为蓝色，并旋转三角形  
            triangle.style.borderTopColor = 'blue';
            triangle.style.borderBottomColor = 'transparent';
            triangle.style.transform = 'rotate(180deg)';
            setTimeout(() => {
                router.push("/")
            }, 3000)
        }
    }
}

// 在组件挂载后更新样式  
onMounted(() => {
    updateTriangleStyle();
});  
</script>

<style scoped>
.triangle {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 14px solid blue;
    /* 初始化时底部颜色为蓝色 */
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.up {
    /* 不需要额外的样式，因为默认就是向上的 */
}

.down {
    /* 向下时只改变边框颜色和方向 */
    transform: rotate(180deg);
}
</style>